import axios from 'axios'
import Vue from 'vue'
import Vuex from 'vuex'

//  下载 存储包 npm install --save vuex-persistedstate@3.2.1
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  // 存储
  plugins:[createPersistedState()],
  state: {
    // 存储 token
    // 1.本地存储
    // token:localStorage.getItem('token') || ''
    // 2.插件存储
    token:'',

    // (5*) 储存 userInfo
    userInfo:{}
  },
  getters: {
  },
  // 唯一同步跟新数据的地方
  mutations: {
    updateToken( state,newToken ){
      state.token = newToken
    },
    // (4*) 定义更新 userInfo 的函数
    updateUserInfo(state,info){
      state.userInfo = info
    }
  },
  // 异步操作数据的地方
  actions: {
    // (2*) 定义发送请求,获取用户信息的函数
    async initUserInfo(context){
      // context: 是 Store 的实例对象
      const { data:res } = await axios.get('/my/userinfo'
      // 已经在拦截器的设置了
      // {
      //   headers:{
      //     Authorization: context.state.token
      //   }
      // }
      )
      console.log(res)
      if(res.code === 0 ){
        // (3*) 将获取到的数据保存到 vuex 中 res.data
        context.commit('updateUserInfo',res.data)
      }
    } 
  },
  // 模块化
  modules: {
  }
})
